<template>
  <div class="orderDetail" :class="{ 'show-more-open': showMore }">
    <div class="energy-title">
      <div class="nav-left">
        <span class="iconfont backHistory" @click="spotCheckView">
          &#xe6eb;
        </span>
      </div>
      <div class="nav-center">
        用量详情
      </div>
      <div class="nav-right">
        <iconSvg
          name="home"
          w="20px"
          h="22px"
          class="right_icon"
          @click.native="backToHomepage"
        ></iconSvg>
      </div>
    </div>

    <div class="cate-nfo">
      <div class="info-list">
        <div class="info-list-title">
          数据信息
        </div>
        <div class="info-list-item full">
          <div class="info-title">数据名称：</div>
          <div class="info-value">
            {{ getEnergyDetails.deviceName || "" }}
          </div>
        </div>
        <div class="info-list-item full">
          <div class="info-title">部门名称：</div>
          <div class="info-value info-tip">
            <span>
              {{ getEnergyDetails.departmentName || "" }}
            </span>
          </div>
        </div>
        <div class="info-list-item full">
          <div class="info-title">数据编码：</div>
          <div class="info-value">
            {{ getEnergyDetails.deviceCode || "1" }}
          </div>
        </div>
        <div class="info-list-item full">
          <div class="info-title">数据类型：</div>
          <div class="info-value">
            {{ getEnergyDetails.dataSource ? "其他" : "仪表" }}
          </div>
        </div>
        <div class="info-list-item full">
          <div class="info-title">能耗类型：</div>
          <div class="info-value">
            {{ deviceEnergyTypeName }}
          </div>
        </div>
      </div>
    </div>

    <div class="cate-nfo">
      <!-- <chart-list :chart-list="chartList"></chart-list> -->
      <div class="chart-box">
        <div class="chart-title">
          <span>
            用量
          </span>
          <div class="group-list">
            <span
              class="list-item"
              :class="{ active: chartActive === index }"
              @click="changeWidgetIndex(index)"
              v-for="(item, index) in ['实时', '日', '月', '年']"
              :key="index"
            >
              {{ item }}
            </span>
          </div>
        </div>
        <div class="chart-area" id="chart" ref="chart"></div>
        <!-- <div class="chart_empty" v-if="!chartData.length">
          <img src="/static/img/chart_empty.png" />
          <p>暂无相关数据</p>
        </div> -->
      </div>
    </div>

    <div class="details-list">
      <iu-card
        class="energy-card"
        v-for="(item, index) in tableData"
        :key="index"
        :tipType="/异常/.test(item.deviceRunStatus) ? 'error' : ''"
      >
        <template #title>
          <span>
            用量信息
          </span>
        </template>
        <template #tip>
          {{ item.deviceRunStatus }}
        </template>
        <template #body>
          <div class="energy-card-body">
            <div class="body-item body-item-full">
              <span class="body-item-key">采集时间：</span>
              <span class="body-item-value">
                {{ item.dataTime | formatDate }}
              </span>
            </div>
          </div>
          <div class="energy-card-body">
            <div class="body-item">
              <span class="body-item-key">总用量：</span>
              <span class="body-item-value">
                {{ item.curMeterValue }}
                <span
                  v-if="
                    privilege(
                      'wechat_energyConsume',
                      type === 1 ? 'wechat_energyConsume:water:edit' : 'wechat_energyConsume:electricity:edit'
                    )
                  "
                  class="modify-btn"
                  @click="modifyMeter(item)"
                >
                  修改
                </span>
              </span>
            </div>
            <div class="body-item">
              <span class="body-item-key">用量：</span>
              <span
                class="body-item-value"
                :class="{
                  warning: /异常/.test(item.deviceRunStatus)
                }"
              >
                {{ item.useValue }}
              </span>
            </div>
            <div class="body-item">
              <span class="body-item-key">表盘读数：</span>
              <span class="body-item-value">
                {{ item.dialValue }}

                <span
                  v-if="
                    privilege(
                      'wechat_energyConsume',
                      type === 1 ? 'wechat_energyConsume:water:edit' : 'wechat_energyConsume:electricity:edit'
                    )
                  "
                  class="modify-btn"
                  @click="modifyMeter(item)"
                >
                  修改
                </span>
              </span>
            </div>
            <div class="body-item">
              <span class="body-item-key">倍率：</span>
              <span class="body-item-value">{{ item.magnification || 1 }}</span>
            </div>
          </div>
          <div class="energy-card-body">
            <div class="body-item body-item-img">
              <span class="body-item-key">原图：</span>
              <span class="body-item-value ">
                <template v-if="item.fileList && item.fileList.length">
                  <x-img
                    v-for="item in item.fileList"
                    :src="item.url"
                    :key="item.id"
                    object-fit="cover"
                    @click.native="showImage(item)"
                  ></x-img>
                </template>
                <template v-else>
                  无
                </template>
              </span>
            </div>
          </div>
          <div class="modify" v-if="item.editRecords&&item.editRecords.length">
            <span>
              修改记录
            </span>
            <span
              v-if="showIndex !== item.id && item.editRecords.length > 1"
              @click="showIndex = item.id"
            >
              展开
            </span>
            <span v-if="showIndex === item.id" @click="showIndex = null">
              收起
            </span>
          </div>
          <div
            class="modify-list"
            v-for="(eItem, eIndex) in item.editRecords"
            :key="eIndex"
            v-show="!eIndex || (showIndex === item.id && eIndex > 0)"
          >
            <div class="energy-card-body">
              <div class="body-item body-item-full">
                <span class="body-item-key">修改人：</span>
                <span class="body-item-value">
                  {{ eItem.userName || "" }}
                </span>
              </div>
            </div>
            <div class="energy-card-body">
              <div class="body-item">
                <span class="body-item-key">总用量：</span>
                <span class="body-item-value">
                  {{ eItem.beforeMeterValue || "" }}
                </span>
              </div>
              <div class="body-item">
                <span class="body-item-key">修改后：</span>
                <span class="body-item-value">
                  {{ eItem.afterMeterValue || "" }}
                </span>
              </div>
              <div class="body-item">
                <span class="body-item-key">表盘读数：</span>
                <span class="body-item-value">
                  {{ eItem.beforeDialValue || "" }}
                </span>
              </div>
              <div class="body-item">
                <span class="body-item-key">修改后：</span>
                <span class="body-item-value">
                  {{ eItem.afterDialValue || "" }}
                </span>
              </div>
            </div>
            <div class="energy-card-body">
              <div class="body-item body-item-full">
                <span class="body-item-key">修改时间：</span>
                <span class="body-item-value">
                  {{ eItem.updateTime | formatDate }}
                </span>
              </div>
            </div>
          </div>
        </template>
      </iu-card>
      <div class="newpage_work_more" v-if="showMoreBtn" @click="getMore">
        查看更多
      </div>
    </div>

    <div v-transfer-dom>
      <x-dialog
        class="energy-img-dialog"
        v-model="showDialogImg"
        dialog-transition="slideUp"
        :hide-on-blur="true"
        :dialog-style="{
          'max-width': '100%',
          width: '100%',
          height: '100%',
          'background-color': 'transparent !important'
        }"
      >
        <div @click="showDialogImg = false" class="img-close">
          <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
        </div>
        <div class="show-img">
          <x-img :src="imgUrl"></x-img>
        </div>
      </x-dialog>
    </div>
    <transition name="fade">
      <!-- :class="showMore ? 'show' : 'hide'" -->
      <div v-if="showMore" class="MoreDataP">
        <div class="nav-center">
          编辑
        </div>
        <div class="MoreDataPInner">
          <div class="searchItem">
            <div class="title">
              倍率：{{ getEnergyDetails.magnification || "1" }}
            </div>
            <div class="title">总用量</div>
            <div class="inner">
              <input
                type="text"
                placeholder="请输入"
                v-model.trim="editForm.curMeterValue"
                @input="inputChange($event, 1)"
                :max="20"
              />
            </div>
            <div class="title">表盘读数</div>
            <div class="inner">
              <input
                type="text"
                placeholder="请输入"
                v-model.trim="editForm.dialValue"
                @input="inputChange($event, 2)"
                :max="20"
              />
            </div>
          </div>
        </div>
        <div class="BtnGroup">
          <div class="btn-reset" @click="cancel">
            取消
          </div>
          <div class="btn-over" @click="changeMeter">
            确认
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { XImg, XInput, XDialog, TransferDom } from "vux";
import DictionaryDao from "@/daos/dictionary_dao";
import EnergyConsumeDao from "@/daos/energy_consume";
import { GetUser, Privilege } from "@/mixin";
import { mapGetters } from "vuex";
import dayjs from "dayjs";
import iuCard from "@/components/common/card/index";
import ChartList from "@/components/common/chart_list/index";
import DataAnalysisDao from "@/daos/data_analysis_dao";

export default {
  directives: {
    ChartList,
    TransferDom
  },
  inject: ["backToHomepage"],
  components: {
    XImg,
    XInput,
    XDialog,
    iuCard
  },
  data() {
    return {
      buttonShow: false,
      detail: {},
      chartData: [],
      chartList: [],
      tableData: [],
      title: "详情",
      deviceEnergyType: [],
      deviceEnergyTypeAction: "Electricity",
      statusIndex: 2,
      imgUrl: "",
      curMeterValue: "",
      showDialogImg: false,
      showMore: false,
      showMoreBtn: false,
      showIndex: null,
      editTag: 1,
      editForm: {
        curMeterValue: "",
        dialValue: ""
      },
      id: 0,
      deviceId: 0,
      chartActive: 0,
      status: 0,
      editRecordsPages: {
        pageNum: 1,
        pageSize: 5,
        totalPage: 0
      },
      pageNum: 1,
      pageSize: 10,
    };
  },
  computed: {
    ...mapGetters(["getEnergyDetails"]),
    user() {
      return this.$store.state.user;
    },
    editRecordsTotalPage() {
      if (this.getEnergyDetails.editRecords) {
        return Math.ceil(
          this.getEnergyDetails.editRecords.length / this.pageSize
        );
      }
      return 1;
    },
    deviceEnergyTypeName() {
      let result = this.deviceEnergyType.find((e) => e.code == this.type);
      return (result && result.name) || "";
    },
  },
  mixins: [GetUser, Privilege],
  mounted() {
    this.type = +this.$route.query.type;
    // let res = this.deviceEnergyType.find(e => e.value == this.type);
    // this.deviceEnergyTypeAction = res.key;
    this.id = this.$route.query.id || this.getEnergyDetails.id || 0;
    this.deviceId =
      this.$route.query.deviceId || this.getEnergyDetails.deviceId || 0;
    this.init();
  },
  methods: {
    init() {
      if (!this.$store.state.user) {
        this.getUserInfo();
      } else {
        this.getDictionary();
        this.getEnergyDetail();
        // this.getChartConfig();
        // this.getEnergyConsumeMore();
      }
    },
    getUserInfo() {
      this.$http(this.$API.getUserInfo, {}).then(res => {
        this.$store.commit("saveUser", res);
        this.init();
      });
    },
    spotCheckView() {
      history.back(-1);
    },
    // 是否数字
    isNumber(source) {
      let flag = /^([0-9]*|\d*\.\d{1,2}?)$/.test(source);
      // console.log(flag,source);
      return flag;
    },
    modifyMeter(item) {
      this.editForm.curMeterValue = item.curMeterValue;
      this.editForm.dialValue = item.dialValue;
      this.editForm.id = item.id;
      this.showMore = true;
    },
    cancel() {
      this.title = "用量详情";
      this.showMore = false;
    },
    getMore() {
      this.pageNum++;
      this.getEnergyDetailList();
    },
    changeWidgetIndex(index) {
      this.chartActive = index;
      let startTime, endTime;
      if (index === 0) {
        startTime = dayjs().subtract(6, "hour");
        endTime = dayjs();
      } else if (index === 1) {
        startTime = dayjs().startOf("date");
        endTime = dayjs()
          .startOf("date")
          .add(1, "day");
      } else if (index === 2) {
        startTime = dayjs().startOf("month");
        endTime = dayjs()
          .startOf("month")
          .add(1, "month");
      } else if (index === 3) {
        startTime = dayjs().startOf("year");
        endTime = dayjs()
          .startOf("year")
          .add(1, "year");
      }
      let date = {
        startTime,
        endTime
      };
      this.getChartDataDetail(date);
    },
    getDictionary() {
      let code = "1"
      DictionaryDao.getListByCode({code}, (data) => {
        if (data) {
          this.deviceEnergyType.splice(0);
          if (data && data.childs) {
            this.deviceEnergyType = data.childs;
          }
        }
      }, true);
    },
    getChartConfig() {
      let params = {
        code: "SJ02",
        departmentId: this.getEnergyDetails.departmentId,
        deviceCode: this.getEnergyDetails.deviceCode
      };
      DataAnalysisDao.getChartConfig(params, res => {
        this.chartList.splice(0);
        if (res && res.length) {
          this.chartList = res.map(e => {
            e.show = 0;
            e.code = "SJ02";
            return e;
          });
        }
      });
    },
    getChartDataDetail(date) {
      // 1:小时 2:日，周 3:月 4:年
      let params = {
        cycleType: this.chartActive,
        deviceCode: this.getEnergyDetails.deviceCode,
        endTime: date.endTime,
        energyType: this.type,
        startTime: date.startTime
      };
      EnergyConsumeDao.getEnergyConsumeChartData(params, res => {
        this.chartData.splice(0);
        if (res && res.length) {
          res.sort((a, b) => a.dataTime - b.dataTime);
          this.chartData = res;
        }
        this.setChart();
      });
    },
    setChart() {
      if (!this.chart) {
        let option = {
          color: ["#F94B48", "#F9D64A", "#54CA75", "#456DE5"],
          grid: {
            containLabel: true,
            top: "18%",
            bottom: "10%",
            left: "4%",
            right: "4%"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
              lineStyle: {
                color: "#979797"
              }
            },
            textStyle: {
              align: "left"
            }
          },
          textStyle: {
            color: "#959595"
          },
          xAxis: {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#979797"
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: "#979797",
                type: "dotted"
              }
            }
          }
        };

        this.chart = this.$echarts.init(this.$refs.chart);
        this.chart.setOption(option);
      }
      let source = this.formatterDataset(this.chartData);
      let series = this.formatterSeries(this.chartData);
      this.chart.setOption({
        dataset: {
          source
        },
        series
      });
      let option = this.chart.getOption();
      if (!source.length) {
        option.graphic = [
          {
            type: "text",
            left: "center",
            top: "40%",
            style: {
              text: "暂无数据",
              fill: "#fff",
              fontSize: 18
            }
          }
        ];
        this.chart.setOption(option, true);
      } else {
        option.graphic = [];
        this.chart.setOption(option, true);
      }
    },
    inputChange(value, tag) {
      // console.log(value.target, tag);
      if (tag === 1) {
        if (!this.isNumber(this.editForm.curMeterValue)) {
          return;
        }
        this.editForm.dialValue = (
          this.editForm.curMeterValue /
          +(
            this.getEnergyDetails.magnification ||
            this.getEnergyDetails.value ||
            1
          )
        ).toFixed(1);
      } else {
        if (!this.isNumber(this.editForm.dialValue)) {
          return;
        }
        this.editForm.curMeterValue =
          this.editForm.dialValue *
          +(
            this.getEnergyDetails.magnification ||
            this.getEnergyDetails.value ||
            1
          );
      }
    },
    formatterDataset(data) {
      let dataset = [],
        xAxis = [],
        yAxis = [];
      if (data && data.length) {
        xAxis.push("时间", "用量");
        data.forEach((e, index) => {
          let date = dayjs(e.dataTime);
          if (!yAxis[index]) {
            let label = "";
            if (this.chartActive === 0) {
              label = date.format("HH:mm:ss");
            } else if (this.chartActive === 1) {
              label = date.hour() + "时";
            } else if (this.chartActive === 2) {
              label = date.date() + "日";
            } else if (this.chartActive === 3) {
              label = date.month() + 1 + "月";
            }
            yAxis.push([label, e.value]);
          } else {
            yAxis[index].push(e.value);
          }
        });
        dataset.push(xAxis, ...yAxis);
        // console.log(dataset);
        return dataset;
      } else {
        return [];
      }
    },
    formatterSeries(data) {
      let series = [{ type: "line" }];
      return series;
    },
    changeMeter() {
      if (
        !this.editForm.curMeterValue ||
        !this.isNumber(this.editForm.curMeterValue) ||
        !this.editForm.dialValue ||
        !this.isNumber(this.editForm.dialValue)
      ) {
        this.$vux.toast.show({
          text: "请输入数字且小数点后最多两位",
          type: "warn"
        });
        return;
      }

      this.handleChangeValue();
    },
    handleChangeValue() {
      let data = {
        id: this.editForm.id,
        curMeterValue: +this.editForm.curMeterValue,
        dialValue: +this.editForm.dialValue
      };
      EnergyConsumeDao.postEnergyConsumeDetailEdit(
        // EnergyConsumeDao[`putEnergyConsume${this.deviceEnergyTypeAction}`](
        data,
        res => {
          this.changeSuccess();
        }
      );
    },
    getEnergyDetailMore() {
      this.pageNum = 1;
      this.getEnergyDetail();
    },
    changeSuccess() {
      this.$vux.toast.show({ text: "修改成功" });
      this.cancel();
      this.getEnergyDetail();
    },
    getEnergyDetail() {
      EnergyConsumeDao.getEnergyConsumeDetail(
      // EnergyConsumeDao[`getEnergyConsumeDetail${this.deviceEnergyTypeAction}`](
        this.id,
        res => {
          if (res) {
            this.$store.commit("setEnergyDetails", res);
            this.getEnergyDetailList();
          }
        }
      );
    },
    getEnergyDetailList() {
      EnergyConsumeDao.getEnergyConsumeDetailList(
        // EnergyConsumeDao[
        //   `getEnergyConsumeDetailList${this.deviceEnergyTypeAction}`
        // ](
        {
          type: this.type,
          orgId: this.user.org.id,
          deviceId: this.deviceId,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        },
        res => {
          if (res) {
            console.log(res);
            if (this.pageNum === 1) {
              this.tableData.splice(0);
            }
            if (res.content && res.content.length) {
              this.tableData.push(...res.content);
            }
            this.showMoreBtn = this.tableData < +res.total;
          }
        }
      );
    },
    showImage(item) {
      this.imgUrl = item.url;
      this.showDialogImg = true;
    }
  }
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transform: translateY(0);
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(-140%);
}

.orderDetail {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: #18182c;
  padding-bottom: 10px;
  &.show-more-open {
    overflow: hidden;
  }
  .energy-title {
    height: 44px;
    background: #18182c;
    padding: 0 15px;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    position: relative;
    .backHistory {
      font-size: 26px;
      color: #fff;
    }
    .nav-left {
      display: flex;
      align-items: center;
    }
    .nav-center {
      color: #fff;
      line-height: 44px;
      text-align: center;
    }
    .nav-border-left {
      border-left: 2px solid #fff;
      height: 16px;
    }
    .nav-right {
      position: relative;
      // width: 30px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .paidan {
        margin-top: -8px;
        i {
          font-size: 26px;
        }
      }
    }
  }
  .chart-box {
    padding: 10px;
    background: #23233d;
    color: #fff;
    text-align: center;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
    &.card-box {
      height: 64px;
      padding: 10px 2px;
      box-sizing: border-box;
      flex: 1;
      overflow: hidden;
      cursor: default;
      position: relative;
      .num,
      .name {
        width: 100%;
        line-height: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .num {
        line-height: 26px;
        font-size: 20px;
      }
      .edit {
        line-height: 18px;
        padding: 5px 0;
        color: #1d4fa0;
      }
      &.active {
        color: #fff;
        background-color: #456de6;
      }
    }
    .chart-title {
      font-size: 16px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .group-list {
      font-size: 14px;
      display: flex;
      justify-content: center;
      border: 1px solid #456de6;
      border-radius: 2px;
      .list-item {
        padding: 0 20px;
        text-align: center;
        color: #456de6;
        flex: 1;
        white-space: nowrap;
        &.active {
          color: #fff;
          background-color: #456de6;
        }
      }
    }
    .chart-area {
      height: 240px;
      margin: 4px 0;
      background-color: #292a4d;
    }

    .chart_empty {
      position: absolute;
      display: block;
      width: 84px;
      bottom: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 100%;
      }
      p {
        text-align: center;
        color: #9ec6fb;
        font-size: 13px;
      }
    }
  }
  .MoreDataP {
    background: #22233f;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: transform 0.3s ease-in-out;
    // transform: translateY(-140%);
    input {
      &::placeholder {
        color: gray !important;
      }
    }
    .nav-center {
      font-size: 16px;
      color: #fff;
      line-height: 44px;
      text-align: center;
    }
    .MoreDataPInner {
      width: 100%;
      color: #ffffff;
    }
    &.show {
      // display: block;
      transform: translateY(0);
    }
    &.hide {
      // display: none;
      transform: translateY(-140%);
    }
    .searchItem {
      padding: 0 15px;
      margin-bottom: 10px;
      &.addP {
        padding-bottom: calc(~"100vh - 400px") !important;
      }
      .title {
        font-size: 16px;
        margin: 8px 0;
      }
      .inner {
        font-size: 16px;
        color: #fff;
        input[type="text"] {
          height: 30px;
          line-height: 30px;
          font-size: 16px;
          background: #292a4d;
          width: 100%;
          margin-bottom: 12px;
          color: #fff;
          padding: 0 8px;
          transition: background 0.3s ease-in-out;
          &:focus {
            background: #383a69;
          }
          &::placeholder {
            line-height: 30px;
          }
        }

        .time {
          display: flex;
          align-items: center;
          font-size: 16px;
          padding: 0 4px 4px;
          background: #292a4d;
          .time-text {
            width: 20px;
            padding: 0 3px;
            text-align: center;
          }
          .time-span {
            flex: 1;
            padding: 2px 0;
            text-align: center;
            border-bottom: 1px solid #dedede;
          }
        }
      }
    }

    .BtnGroup {
      display: flex;
      width: 100%;
      height: 44px !important;
      line-height: 44px !important;
      transition: 0.3s all;
      margin-top: 32px;
      div {
        text-align: center;
        height: 44px !important;
        border-top: 1px #3967dc solid;
        border-bottom: 1px #3967dc solid;
      }
    }
    .btn-reset {
      flex: 1;
      background: #22233f;
      padding: 0 15px;
      border-radius: 0;
      color: #456de6;
      line-height: 44px !important;
      transition: 0.3s all;
      &.active {
        background: #456de6;
        color: #fff;
      }
    }
    .btn-over {
      flex: 2;
      background: #3967dc;
      padding: 0 15px;
      color: #fff;
      border-radius: 0;
      line-height: 44px !important;
      transition: 0.3s all;
      &.active {
        background: #6e92ff;
      }
    }
  }
  .energy-card {
    margin-bottom: 12px;
    margin-left: 8px;
    margin-right: 8px;
    .energy-card-body {
      display: flex;
      flex-wrap: wrap;
      .body-item {
        flex: none;
        font-size: 14px;
        margin: 3px 0;
        width: 55%;
        &:nth-child(2n) {
          width: 45%;
        }
        .body-item-key {
          color: rgba(255, 255, 255, 0.5);
        }
        .body-item-value {
          &.warning {
            color: #ff2c2c;
          }
        }
      }
      .body-item-full {
        width: 100%;
      }
      .body-item-img {
        width: 100%;
        display: flex;
        min-height: 30px;
        .body-item-value {
          width: 180px;
        }
        img {
          // object-fit: cover;
          max-width: 100%;
          height: auto;
        }
      }
      .modify-btn {
        font-size: 14px;
        margin-left: 8px;
        color: gray;
      }
    }
  }
}

.newpage_work_more {
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  color: #456de6;
}
.cate-nfo {
  height: auto;
  // min-height: calc(~"100vh" - 80px);
  padding: 0 8px 8px;
  border-radius: 8px;
  background-color: #18182c;
  .info-list {
    background: #292a4d;
    padding: 1px 0;
    margin: 8px 0;
    display: flex;
    flex-wrap: wrap;
    .info-list-title {
      font-size: 16px;
      color: #fff;
      width: 100%;
      padding: 4px 8px;
    }
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
      width: 43%;
      padding: 4px 8px;
      font-size: 14px;
      &.full {
        width: 100%;
      }
      &.info-space-between {
        justify-content: space-between;
        > div {
          width: 50%;
          display: flex;
        }
      }
    }

    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 14px;
    }

    .info-value {
      flex: 1;
      font-size: 14px;
      color: #fff;
      &.warning {
        color: #ff2c2c;
      }
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }
    }
    .info-tip {
      display: flex;
      justify-content: space-between;
      .warning {
        color: #ff2c2c;
      }
    }
  }
}
.modify {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: space-between;
}
.modify-list {
  padding: 4px 0;
  margin-bottom: 4px;
  & + & {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }
}
</style>
<style lang="less">
.energy-img-dialog {
  .img-close {
    text-align: right;
    margin-right: 24px;
    margin-top: 30px;
  }
  .show-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
    img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
